import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/login',
    name: 'Login',
    component: () => import('@/views/login/index'),
    hidden: true
  },
  { // 一级路由渲染到根组件中的 router-view
    path: '',
    component: () => import('@/views/layout/index'),
    redirect: '/home',
    children: [
      // 子路由渲染到父组件的 router-view
      {
        // path: '/', // 默认子路由
        path: '/home', // 页面中改为/home 之前没加重定向（不知道为啥当时没加） 否则无法点击回到首页
        name: 'Home',
        component: () => import('@/views/home/index'),
        meta: {
          icon: 'home-o',
          title: '首页',
          navbarTitle: '校园打卡系统'
        }
      },
      {
        path: '/list',
        name: 'list',
        component: () => import('@/views/list/index'),
        meta: {
          icon: 'friends-o',
          title: '学生',
          navbarTitle: '学生列表',
          roles: ['admin']
        }
      },
      {
        path: '/news',
        name: 'News',
        component: () => import('@/views/news/index'),
        meta: {
          icon: 'comment-o',
          title: '消息',
          navbarTitle: '消息'
        }
      },
      {
        path: '/my',
        name: 'My',
        component: () => import('@/views/my/index'),
        meta: {
          icon: 'manager-o',
          title: '我的',
          navbarTitle: '个人中心'
        }
      }
    ]
  },
  {
    path: '/user/profile',
    name: 'user-profile',
    component: () => import('@/views/user-profile'),
    hidden: true
  },
  {
    path: '/feedback',
    name: 'feedback',
    component: () => import('@/views/feedback'),
    hidden: true
  },
  {
    path: '/leave/leaveInfo',
    name: 'leave-info',
    component: () => import('@/views/leave-info'),
    hidden: true
  },
  {
    path: '/leave/cancel',
    name: 'cancel',
    component: () => import('@/views/cancel'),
    hidden: true
  },
  {
    path: '/signIn',
    name: 'signIn',
    component: () => import('@/views/signIn'),
    hidden: true
  },
  {
    path: '/leave',
    name: 'leave',
    component: () => import('@/views/leave'),
    hidden: true
  },
  {
    path: '/healthy',
    name: 'healthy',
    component: () => import('@/views/healthy'),
    hidden: true
  },
  {
    path: '/classHours',
    name: 'classHours',
    component: () => import('@/views/classHours'),
    hidden: true
  },
  {
    path: '/QR',
    name: 'QR',
    component: () => import('@/views/QR'),
    hidden: true
  },
  {
    path: '/404',
    name: '404',
    component: () => import('@/views/404'),
    hidden: true
  },
  {
    path: '*',
    redirect: '/404',
    hidden: true
  }
]

// const router = new VueRouter({
//   mode: 'history',
//   base: process.env.BASE_URL,
//   routes
// })

const router = new VueRouter({
  // mode: 'history',
  // 解决vue框架页面跳转有白色不可追踪色块的bug
  scrollBehavior (to, from, savedPosition) {
    return { x: 0, y: 0 }
  },
  routes
})

// 解决Loading chunk (\d)+ failed问题
router.onError((error) => {
  console.error(error)
  const pattern = /Loading chunk/g
  // const pattern = /Loading chunk (\d)+ failed/g
  const isChunkLoadFailed = error.message.match(pattern)
  const targetPath = router.history.pending.fullPath
  if (isChunkLoadFailed && error.type === 'missing') {
    // const targetPath = router.history.pending.fullPath
    router.push(targetPath)
  }
})

export default router
